<template>
  <div class="market-trade">
    <div class="back" @click="back"></div>
    <div class="page-top">
      市场交易
    </div>
    <div class="trade-main">
      <div class="main-left">
        <div class="left-section-655">
          <div class="section-title">
            交易统计
          </div>
          <div class="period-btn-group">
            <div class="period-btns-item" :class="{'period-btns-item-secected': periodIndex === 1}" @click="changePeriod(1)">本年</div>
            <div class="period-btns-item" :class="{'period-btns-item-secected': periodIndex === 2}" @click="changePeriod(2)">本季</div>
            <div class="period-btns-item" :class="{'period-btns-item-secected': periodIndex === 3}" @click="changePeriod(3)">本月</div>
            <div class="period-btns-item" :class="{'period-btns-item-secected': periodIndex === 4}" @click="changePeriod(4)">本周</div>
          </div>
          <div class="jytj-select">
            <el-select v-model="gridValue" placeholder="请选择" size="small" :popper-append-to-body="false">
              <el-option
                  v-for="item in gridOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div id="jytj-line" style="width: 100%;height: 200px;"></div>
          <div class="jytj-bar-pie">
            <div id="bar-pie-left" style="width: 50%;height: 100%;float: left;"></div>
            <div id="bar-pie-right" style="width: 50%;height: 100%;float: left;"></div>
          </div>
          <div class="no-bg-title" style="margin-top: 0px;">实时交易信息</div>
          <div class="safety-list-title" style="margin-top: 00px;">
          <div class="safety-list-title-item" style="width: 20%;">订单号</div>
          <div class="safety-list-title-item" style="width: 15%;">经营户</div>
          <div class="safety-list-title-item" style="width: 20%;">商品</div>
          <div class="safety-list-title-item" style="width: 15%;">金额（元）</div>
          <div class="safety-list-title-item" style="width: 25%;">交易时间</div>
        </div>
          <div class="safety-list-box" style="height: 81px;">
            <vue-seamless-scroll
                :data="gfxjyhListData"
                class="seamless-warp"
                :class-option="classOption">
              <div v-for="(item, index) in gfxjyhListData" :key="index" class="safety-list-box-item">
                <div class="item-section" style="width: 20%;">{{item.name}}</div>
                <div class="item-section" style="width: 15%;">{{item.type}}</div>
                <div class="item-section" style="width: 20%;">{{item.num}}</div>
                <div class="item-section" style="width: 15%;">{{item.num}}</div>
                <div class="item-section" style="width: 25%;">{{item.tel}}</div>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
        <div class="left-section-285">
          <div class="section-title">
            商品销量Top10
          </div>
          <div class="period-btn-group" style="justify-content: right">
            <div class="period-btns-item" :class="{'period-btns-item-secected': periodIndex1 === 1}" @click="changePeriod1(1)">本年</div>
            <div class="period-btns-item" :class="{'period-btns-item-secected': periodIndex1 === 2}" @click="changePeriod1(2)">本季</div>
            <div class="period-btns-item" :class="{'period-btns-item-secected': periodIndex1 === 3}" @click="changePeriod1(3)">本月</div>
            <div class="period-btns-item" :class="{'period-btns-item-secected': periodIndex1 === 4}" @click="changePeriod1(4)">本周</div>
          </div>
          <div class="safety-list-title" style="margin-top: 20px;">
            <div class="safety-list-title-item" style="width: 10%;">序号</div>
            <div class="safety-list-title-item" style="width: 30%;">商品名称</div>
            <div class="safety-list-title-item" style="width: 30%;">销售额（元）</div>
            <div class="safety-list-title-item" style="width: 30%;">销售量（kg）</div>
          </div>
          <div class="safety-list-box" style="height: 124px;">
            <vue-seamless-scroll
                :data="gfxjyhListData"
                class="seamless-warp"
                :class-option="classOption">
              <div v-for="(item, index) in gfxjyhListData" :key="index" class="safety-list-box-item">
                <div class="item-section" style="width: 10%;">{{item.name}}</div>
                <div class="item-section" style="width: 30%;">{{item.type}}</div>
                <div class="item-section" style="width: 30%;">{{item.num}}</div>
                <div class="item-section" style="width: 30%;">{{item.num}}</div>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="main-center">
        <div class="center-top-scjy">
          <div class="index-center-main">
            <div class="main-item">
              <div class="main-item-name">当日总交易额（万元）</div>
              <div class="main-item-num">13</div>
            </div>
            <div class="main-item">
              <div class="main-item-name">当日订单数（件）</div>
              <div class="main-item-num">19809</div>
            </div>
            <div class="main-item">
              <div class="main-item-name">当日销量（吨）</div>
              <div class="main-item-num">200</div>
            </div>
          </div>
          <div class="index-center-main">
            <div class="main-item">
              <div class="main-item-name">当日大宗需求交易额（元）</div>
              <div class="main-item-num">22333</div>
            </div>
            <div class="main-item">
              <div class="main-item-name">当日进口商品交易额（元）</div>
              <div class="main-item-num">22333</div>
            </div>
            <div class="main-item">
              <div class="main-item-name">当日交易商品数（件）</div>
              <div class="main-item-num">2839</div>
            </div>
          </div>
        </div>
        <div class="center-middle">
          <div id="center-map" style="width: 100%;height: 100%;"></div>
        </div>
        <div class="center-bottom-scjy">
          <div class="scjy-bottom-left">
            <div class="section-title">
              精准致富订单
            </div>
            <div class="zfdd-box">
              <div class="zfdd-box-icon">
                <img src="../assets/images/index/left_blue.png" @click="leftChange" alt="">
              </div>
              <div class="zfdd-box-middle">
                <div class="move-body" :style="{marginLeft: marginLeft + 'px'}">
                  <div class="zfdd-box-middle-item" v-for="(item, index) in jzzfddData" :key="index">
                    <div class="item-title">订单号：{{ item.id }} <div class="look-detail">查看详情</div></div>
                    <div class="item-content">
                      帮扶村设：<span>{{ item.country }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;承销商：<span>{{ item.name }}</span><br>
                      交易额：<span>{{item.price}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;交易量：<span>{{ item.weight }}</span><br>
                      交易时间：<span>{{item.time}}</span><br>
                    </div>
                  </div>
                </div>
              </div>
              <div class="zfdd-box-icon">
                <img src="../assets/images/index/right_blue.png" @click="rightChange" alt="">
              </div>
            </div>
          </div>
          <div class="scjy-bottom-right">
            <div class="section-title">
              经营户共富共建积分
            </div>
            <div class="gfjf-box">
              <div class="gfjf-box-item" v-for="item in 6">
                <img src="../assets/images/marketTrade/people_lia.png" alt="">
                <div class="item-name">张亮批发</div>
                <div class="item-number">85</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main-right">
        <div class="section-title">
          交易溯源
        </div>
        <div id="cdtj-bar" style="width: 100%;height: 180px;"></div>
        <div class="safety-list-title" style="margin-top: 00px;">
          <div class="safety-list-title-item" style="width: 18%;">供货商</div>
          <div class="safety-list-title-item" style="width: 18%;">供货商类型</div>
          <div class="safety-list-title-item" style="width: 18%;">经营商品</div>
          <div class="safety-list-title-item" style="width: 18%;">重量（kg）</div>
          <div class="safety-list-title-item" style="width: 24%;">时间</div>
        </div>
        <div class="safety-list-box" style="height: 167px;">
          <vue-seamless-scroll
              :data="gfxjyhListData"
              class="seamless-warp"
              :class-option="classOption">
            <div v-for="(item, index) in gfxjyhListData" :key="index" class="safety-list-box-item">
              <div class="item-section" style="width: 18%;">{{item.name}}</div>
              <div class="item-section" style="width: 18%;">{{item.type}}</div>
              <div class="item-section" style="width: 18%;">{{item.num}}</div>
              <div class="item-section" style="width: 18%;">{{item.num}}</div>
              <div class="item-section" style="width: 24%;">{{item.tel}}</div>
            </div>
          </vue-seamless-scroll>
        </div>
        <div id="sadj-bar" style="width: 100%;height: 180px;"></div>
        <div class="no-bg-title" style="margin-top: 0px;">优质供货商</div>
        <div class="safety-list-title" style="margin-top: 00px;">
          <div class="safety-list-title-item" style="width: 20%;">供货商</div>
          <div class="safety-list-title-item" style="width: 35%;">地区</div>
          <div class="safety-list-title-item" style="width: 20%;">食安等级</div>
          <div class="safety-list-title-item" style="width: 25%;">食品检测合格率</div>
        </div>
        <div class="safety-list-box" style="height: 81px;">
          <vue-seamless-scroll
              :data="gfxjyhListData"
              class="seamless-warp"
              :class-option="classOption">
            <div v-for="(item, index) in gfxjyhListData" :key="index" class="safety-list-box-item">
              <div class="item-section" style="width: 20%;">{{item.name}}</div>
              <div class="item-section" style="width: 35%;">{{item.type}}</div>
              <div class="item-section" style="width: 20%;">{{item.num}}</div>
              <div class="item-section" style="width: 25%;">{{item.num}}</div>
            </div>
          </vue-seamless-scroll>
        </div>
        <div class="no-bg-title" style="margin-top: 0px;">供货商黑名单</div>
        <div class="safety-list-title" style="margin-top: 00px;">
          <div class="safety-list-title-item" style="width: 20%;">供货商</div>
          <div class="safety-list-title-item" style="width: 35%;">地区</div>
          <div class="safety-list-title-item" style="width: 20%;">食安等级</div>
          <div class="safety-list-title-item" style="width: 25%;">食品检测合格率</div>
        </div>
        <div class="safety-list-box" style="height: 81px;">
          <vue-seamless-scroll
              :data="gfxjyhListData"
              class="seamless-warp"
              :class-option="classOption">
            <div v-for="(item, index) in gfxjyhListData" :key="index" class="safety-list-box-item">
              <div class="item-section" style="width: 20%;">{{item.name}}</div>
              <div class="item-section" style="width: 35%;">{{item.type}}</div>
              <div class="item-section" style="width: 20%;">{{item.num}}</div>
              <div class="item-section" style="width: 25%;">{{item.num}}</div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import $ from 'jquery';

export default {
  name: "marketTrade",
  data () {
    return {
      gfxjyhListData: [
        {name: '王大力', type: '好人好事', num: '+5', master: '江锦萍', tel: '2022-06-16 12:00'},
        {name: '玛丽', type: '占道经营', num: '-3', master: '周文彰', tel: '2022-06-16 12:00'},
        {name: '王大力', type: '好人好事', num: '+5', master: '朱思伟', tel: '2022-06-16 12:00'},
        {name: '玛丽', type: '占道经营', num: '-3', master: '叶之宇', tel: '2022-06-16 12:00'},
        {name: '王大力', type: '好人好事', num: '+5', master: '张东科', tel: '2022-06-16 12:00'},
        {name: '玛丽', type: '占道经营', num: '-3', master: '祝原', tel: '2022-06-16 12:00'},
      ],
      periodIndex: 4,
      periodIndex1: 4,
      gridValue: '',
      gridOption: [
        {
          label: '--请选择--',
          value: ''
        },
        {
          label: '交易额趋势',
          value: 1
        }
      ],
      tradeLineOptions1: {
        title: {
          show: false,
          text: '交易额趋势',
              left: 'center',
              textStyle: {
            fontSize: 16,
                color: '#00F6FF'
          }
        },
        xAxis: {
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          data: ['08/08', '08/11', '08/15']
        },
        yAxis: {
          name: '交易金额/元',
              nameTextStyle: {
            color: '#FFFFFF',
                padding: [0, 0, 0, -20]
          },
          axisTick: {
            show: false
          },
          splitNumber: 4,
              axisLabel: {
            color: '#FFFFFF'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3020)',
                  type: 'dashed'
            }
          }
        },
        grid: {
          top: 65,
          left: 45,
          right: 10,
          bottom: 20
        },
        series: [
          {
            name: '交易额趋势',
            type: 'line',
            lineStyle: {
              color: '#00FFAF',
              width: 2
            },
            symbol: 'circle',
            smooth: true,
            symbolSize: 6,
            itemStyle: {
              color: '#00FFAF'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(0, 255, 175, 0.3020)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(0, 255, 175, 0.0510)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            data: [2002, 7085, 4003]
          }
        ]
      },
      jzzfddData: [
        {id: 457845,  country: '尾', name: '张亮批', price: '187kg', weight: '200kg', time: '2022-07-12 13:00:00'},
        {id: 123456,  country: '头', name: '张亮批', price: '187kg', weight: '200kg', time: '2022-07-12 13:00:00'},
        {id: 245678,  country: '大白村', name: '张亮批', price: '187kg', weight: '200kg', time: '2022-07-12 13:00:00'},
        {id: 345874,  country: '大白村', name: '张亮批', price: '187kg', weight: '200kg', time: '2022-07-12 13:00:00'},
        {id: 745575,  country: '大白村', name: '张亮批', price: '187kg', weight: '200kg', time: '2022-07-12 13:00:00'},
        {id: 457845,  country: '尾', name: '张亮批', price: '187kg', weight: '200kg', time: '2022-07-12 13:00:00'},
        {id: 123456,  country: '头', name: '张亮批', price: '187kg', weight: '200kg', time: '2022-07-12 13:00:00'},
      ]
      ,leftNum: 1
      ,rightNum: 2
      ,marginLeft: -383
    }
  },
  computed: {
    // 公告滚动自定义
    classOption() {
      return {
        step: 2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.cityData.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 43, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 5000, // 单步运动停止的时间(默认值1000ms)
      }
    },
    classOption1() {
      return {
        step: 20, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.cityData.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 580, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 5000, // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
  mounted() {
    this.initSpcdBar()
    this.initJyhxyBar()
    this.initTradeLine1()
    this.initJytjBar()
    this.initJytjPie()
    this.initCenterMap()
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    //商品产地统计柱状图
    initSpcdBar () {
      let bar = echarts.init(document.getElementById('cdtj-bar'))
      let option = {
        title: {
          text: '商品产地统计',
          left: 'center',
          textStyle: {
            fontSize: 16,
            color: '#00F6FF'
          },
          top: 10
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: 'rgba(73, 145, 254, 1)',
              padding: [5, 7, 5, 7]
            }
          },
          // formatter: '人数：{c}',
          textStyle: {
            color: '#FFF'
          },
          confine: true,
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          borderColor: 'transparent'
        },
        xAxis: {
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          data: ['浙江', '安徽',  '江西', '江苏', '山东', '福建']
        },
        yAxis: {
          name: '商品重量',
          nameTextStyle: {
            color: '#FFFFFF',
            padding: [0, 0, 0, -30]
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3020)',
              type: 'dashed'
            }
          }
        },
        grid: {
          top: 40,
          left:60,
          right: 10,
          bottom: 40
        },
        series: [
          {
            name: '检出商品排行',
            type: 'bar',
            symbol: 'circle',
            barWidth: 24,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(0, 239, 255, 0.6471)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(0, 239, 255, 0.2039)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderRadius: [2,2,0,0]
            },
            data: [3889, 3021, 2912, 3001, 2564, 1888]
          }
        ]
      }
      bar.setOption(option)
    },
    //供货商食安等级柱状图
    initJyhxyBar () {
      let bar = echarts.init(document.getElementById('sadj-bar'))
      let option = {
        title: {
          text: '供货商食安等级',
          left: 'center',
          textStyle: {
            fontSize: 13,
            color: '#00F6FF'
          },
          top: 10
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: 'rgba(73, 145, 254, 1)',
              padding: [5, 7, 5, 7]
            }
          },
          // formatter: '人数：{c}',
          textStyle: {
            color: '#FFF'
          },
          confine: true,
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          borderColor: 'transparent'
        },
        xAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3020)',
              type: 'dashed'
            }
          },
        },
        yAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          data: ['二氧化硫', '肉类水分', '亚硝酸盐','农药残留', '吊白块'].reverse()
        },
        grid: {
          top: 40,
          left:60,
          right: 10,
          bottom: 20
        },
        series: [
          {
            name: '检出商品排行',
            type: 'bar',
            symbol: 'circle',
            barWidth: 12,
            itemStyle: {
              color: {
                type: 'linear',
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 0, color: 'rgba(0, 239, 255, 0.6471)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(0, 239, 255, 0.2039)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderRadius: [0,2,2,0]
            },
            data: [18, 16, 14, 10, 5].reverse()
          }
        ]
      }
      bar.setOption(option)
    },
    //年、季、月、周切换
    changePeriod (index) {
      this.periodIndex = index
    },
    changePeriod1 (index) {
      this.periodIndex1 = index
    },
    //交易统计折线图
    initTradeLine1 (clear) {
      if (clear) {
        echarts.init(document.getElementById('jytj-line')).clear()
      }
      echarts.init(document.getElementById('jytj-line')).setOption(this.tradeLineOptions1)
    },
    //特色产品交易额排名柱状图
    initJytjBar () {
      let bar = echarts.init(document.getElementById('bar-pie-left'))
      let option = {
        title: {
          text: '特色产品交易额排名',
          left: 'center',
          textStyle: {
            fontSize: 16,
            color: '#00F6FF'
          },
          top: 10
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: 'rgba(73, 145, 254, 1)',
              padding: [5, 7, 5, 7]
            }
          },
          // formatter: '人数：{c}',
          textStyle: {
            color: '#FFF'
          },
          confine: true,
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          borderColor: 'transparent'
        },
        xAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3020)',
              type: 'dashed'
            }
          },
        },
        yAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          data: ['二氧化硫', '肉类水分', '亚硝酸盐','农药残留', '吊白块'].reverse()
        },
        grid: {
          top: 50,
          left:60,
          right: 10,
          bottom: 20
        },
        series: [
          {
            name: '检出商品排行',
            type: 'bar',
            symbol: 'circle',
            barWidth: 12,
            itemStyle: {
              color: {
                type: 'linear',
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 0, color: 'rgba(0, 239, 255, 0.6471)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(0, 239, 255, 0.2039)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderRadius: [0,2,2,0]
            },
            data: [18, 16, 14, 10, 5].reverse()
          }
        ]
      }
      bar.setOption(option)
    },
    //商品大类交易分布饼图
    initJytjPie () {
      let pie = echarts.init(document.getElementById('bar-pie-right'))
      let option = {
        title: {
          text: '商品大类交易分布',
          left: 'center',
          textStyle: {
            fontSize: 16,
            color: '#00F6FF'
          },
          top: 10
        },
        tooltip: {

        },
        legend: {
          orient: 'vertical',
          right: 10,
          textStyle: {
            color: '#FFFFFF'
          },
          top: 50,
          icon: 'circle',
          itemGap: 15
        },
        series: [
          {
            type: 'pie',
            center: ['35%', '60%'],
            radius: ['40%', '55%'],
            color: ['#00F6FF', '#FFD800', '#5AF772', '#FF6297', '#08A4FF'],
            label: {
              show: false
            },
            data: [
              {
                name: '违章违规1',
                value: 22
              },
              {
                name: '违章违规2',
                value: 45
              },
              {
                name: '违章违规3',
                value: 66
              },
              {
                name: '违章违规4',
                value: 45
              },
              {
                name: '违章违规5',
                value: 22
              }
            ]
          }
        ]
      }
      pie.setOption(option)
    },
    //中间地图
    initCenterMap () {
      $.getJSON('./json/China.json', (geoJson) => {
        const name = '中华人民共和国'
        const centerMap = echarts.init(document.getElementById('center-map'))
        echarts.registerMap(name, geoJson)
        centerMap.setOption({
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              return '<div style="background: white;font-size: 20px;padding: 10px;border-radius: 5px">'+params.name+'</div>';
            }
          },
          geo: {
            map: name,
            silent: true, // 关掉鼠标移入事件
            layoutCenter: ['50%', '65%'],
            layoutSize: '120%',
            roam: true,
            label: {
              show: false
            },
            emphasis: {
              show: false
            },
            select: {
              show: false
            },
            itemStyle: {
              areaColor: // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                  {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: 'rgba(93, 239, 254, 0.3020)' // 0% 处的颜色
                    }, {
                      offset: 1, color: 'rgba(93, 239, 254, 0.0510)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  },
              borderWidth: 1,
              borderColor: 'rgba(93, 239, 254, 1)'
            }
          },
          series: [
            // {
            //   name: '农贸',
            //   tooltip: {
            //     // show:false,
            //     trigger: 'item',
            //     formatter: function (params) {
            //       return '<div style="background: white;font-size: 20px;padding: 10px;border-radius: 5px">'+params.name+'</div>';
            //     }
            //   },
            //   type: 'scatter',
            //   coordinateSystem: 'geo',
            //   data: this.nmMarketPos,
            //   symbol: 'path://M738.68 229.01c-125.53-130.2-329.06-130.2-454.59 0-125.55 130.2-125.55 341.33 0 471.53l227.29 234.44 227.29-234.44c125.55-130.2 125.55-341.32 0.01-471.53zM511.39 553.25c-55.48 0-100.45-44.97-100.45-100.45 0-55.46 44.97-100.46 100.45-100.46 55.48 0 100.45 45 100.45 100.46 0 55.49-44.97 100.45-100.45 100.45z',
            //   symbolSize: [16,21],
            //   itemStyle: {
            //     color: '#ffffff'
            //   },
            //   label: {
            //     show: false,
            //     formatter: '{b}',
            //     position: 'right',
            //     textStyle: {
            //       color: '#ffffff',
            //       fontSize: 16
            //     }
            //   },
            //   zlevel:502,
            //   emphasis: {
            //     label: {
            //       show: false
            //     }
            //   }
            // },
            // {
            //   name: '专业',
            //   tooltip: {
            //     // show:false,
            //     trigger: 'item',
            //     formatter: function (params) {
            //       return '<div style="background: white;font-size: 20px;padding: 10px;border-radius: 5px">'+params.name+'</div>';
            //     }
            //   },
            //   type: 'scatter',
            //   coordinateSystem: 'geo',
            //   data: this.zyMarketPos,
            //   symbol: 'path://M738.68 229.01c-125.53-130.2-329.06-130.2-454.59 0-125.55 130.2-125.55 341.33 0 471.53l227.29 234.44 227.29-234.44c125.55-130.2 125.55-341.32 0.01-471.53zM511.39 553.25c-55.48 0-100.45-44.97-100.45-100.45 0-55.46 44.97-100.46 100.45-100.46 55.48 0 100.45 45 100.45 100.46 0 55.49-44.97 100.45-100.45 100.45z',
            //   // symbol:'path://M527.053 96.924c-169.131 0.322-306.127 137.496-306.127 306.7 0 157.986 128.978 324.17 278.121 502.935 7.838 9.418 17.977 14.485 28.006 15.061 10.029-0.576 20.168-5.643 28.002-15.061 149.144-178.765 278.123-344.948 278.123-502.935 0-169.205-136.997-306.378-306.126-306.7zM527.053 500.967c-66.070-0.358-119.562-53.956-119.562-120.099s53.492-119.74 119.562-120.099c66.069 0.358 119.557 53.956 119.557 120.099s-53.487 119.74-119.557 120.099z',
            //   symbolSize:[16,21],
            //   itemStyle: {
            //     color: '#ffffff'
            //   },
            //   label: {
            //     show: false,
            //     formatter: '{b}',
            //     position: 'right',
            //     textStyle: {
            //       color: '#ffffff',
            //       fontSize: 16
            //     }
            //   },
            //   zlevel:502,
            //   emphasis: {
            //     label: {
            //       show: false
            //     }
            //   }
            // },
          ]
        })

        centerMap.off('click')
        centerMap.on('click', (params) => {
          const data = params.data
          window.open(`http://8.133.187.173/spscUi/page/column4/marketInfoDetail.html?marketName=${data.name}&lx=${data.lx}`)
        })
      })
    },
    //精准致富订单自定义轮播效果
    leftChange () {
      if (this.leftNum > 0) {
        this.leftNum--
        if (this.leftNum === 0) {
          //无缝循环
          setTimeout(() => {
            this.leftNum = this.jzzfddData.length - 2
            $('.move-body').css({
              transition: 'unset'
            })
            this.marginLeft = -383 * this.leftNum
          }, 200)
        }
        $('.move-body').css({
          transition: 'all 0.2s'
        })
        this.marginLeft = -383 * this.leftNum
      }
    },
    rightChange () {
      if (this.leftNum < this.jzzfddData.length - 1) {
        this.leftNum++
        if (this.leftNum === this.jzzfddData.length - 1) {
          setTimeout(() => {
            this.leftNum = 1
            $('.move-body').css({
              transition: 'unset'
            })
            this.marginLeft = -383 * this.leftNum
          }, 200)
        }
        $('.move-body').css({
          transition: 'all 0.2s'
        })
        this.marginLeft = -383 * this.leftNum
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "../assets/style/marketTrade.css";
</style>
